<template>
  <ve-card :title="record.code" :sub-title="record.checkStatusName" :type="getCardType(record)" @click="toDetailFn(record)">
    <view class="order-tag-list">
      <view class="order-tag-item" v-for="(item, index) in record.labelList" :key="index">
        {{ item }}
      </view>
    </view>
    <ve-cell label="费用产生门店">{{ record.feeOrgName || '-' }}</ve-cell>
    <ve-cell label="支出总额">{{ record.amount || '-' }}元</ve-cell>
    <ve-cell label="付款状态">
      <view :class="['payStatus_' + record.payStatus]"> {{ record.payStatusName || '-' }}</view>
    </ve-cell>
    <ve-cell label="车辆信息">
      <view class="checkFlow">
        <view v-for="(item, index) in record.feeList" :key="index">
          {{ item.carId ? `${item.licenseNo} ${item.carModel}` : '-' }}
        </view>
      </view>
    </ve-cell>
    <ve-cell label="收款方信息">
      <view v-if="record.costType == 1"> {{ record.collectStaffName }} {{ record.collectInExpWayName }} {{ record.collectCard }} </view>
      <view v-else>
        <view v-if="record.collectType == 2">
          {{ record.collectIndustryName }} {{ record.collectInExpWayName }} {{ record.collectCard }}
        </view>
        <view v-else>{{ record.collectSupplierName }} {{ record.collectInExpWayName }} {{ record.collectCard }}</view>
      </view>
    </ve-cell>
    <ve-cell label="申请人">
      <view v-if="record.applyStaffName || record.applyTime">
        <text>{{ record.applyStaffName || '-' }}</text>
        <text v-if="record.applyStaffName && record.applyTime"> | </text>
        <text>{{ record.applyTime || '-' }}</text>
      </view>
      <text></text>
    </ve-cell>
    <ve-cell label="审批流">
      <view class="checkFlow">
        <text v-if="record.checkStatus == 1">-</text>
        <template v-else>
          <view v-for="(item, index) in record.checkFlowList" :key="index">
            <view class="content" v-if="item.staffId">
              <view class="checkStaff line-ellipsis">{{ item.staffName || '-' }}</view>
              <ve-tag
                v-if="item.status"
                :color="getStatusType(item).color"
                :background="getStatusType(item).background"
                style="margin-left: 16rpx; font-size: 24rpx"
                :title="item.statusName"
              >
              </ve-tag>
              <text style="margin-left: 16rpx" v-else>{{ item.staffName ? '-' : '' }}</text>
            </view>
          </view>
        </template>
      </view>
    </ve-cell>
    <ve-cell label="关联工单">
      <view v-if="record.workTypeName || record.workCode">
        <view>{{ record.workTypeName || '-' }}</view>
        <view v-if="record.workCode" class="link" @click.stop="toWork(record)">{{ record.workCode }}</view>
      </view>
      <view v-else>-</view>
    </ve-cell>
    <ve-cell label="关联业务">
      <view v-if="record.businessTypeName || record.businessCode">
        <view>{{ record.businessTypeName || '-' }}</view>
        <view v-if="record.businessCode" class="link" @click.stop="toOrder(record)">{{ record.businessCode }}</view>
      </view>
      <view v-else>-</view>
    </ve-cell>
    <ve-cell label="客户信息" v-if="record.memberName || record.memberPhone">{{
      [record.memberName, record.memberPhone].filter((it) => it === 0 || Boolean(it)).join(',')
    }}</ve-cell>
    <ve-cell label="关联单据类型">{{ record.refCostTypeName || '-' }}</ve-cell>
    <ve-cell label="支出单类型">{{ record.costTypeName || '-' }}</ve-cell>
    <ve-cell label="付款时间">{{ record.payTime || '-' }}</ve-cell>
    <ve-operate-list :operates="operates" :record="record" operate-storagekey="hotUpdate_operate-cost" storage-keys="code" />
  </ve-card>
</template>

<script setup>
  import { ref } from 'vue'
  import { revokeCostApi, nullifyCostApi } from '@/api/cost/index'
  import { usePermission } from '@/hooks/usePermission'
  defineProps({
    record: {
      type: Object,
      default: () => {},
    },
  })

  const operates = ref([
    {
      label: '重新申请',
      permission: 'svmsapp:operate-cost.againapply',
      show: (record) => record.ifAgain,
      method: (record) => {
        if (record.costType == 1) {
          uni.navigateTo({
            url: `/pages/operate-cost/apply-form/index?id=${record.id}&type=againType`,
          })
        } else {
          uni.navigateTo({
            url: `/pages/operate-cost/pay-form/index?id=${record.id}&type=againType`,
          })
        }
      },
    },
    {
      label: '修改',
      show: (record) => record.ifEdit,
      method: (record) => {
        if (record.costType == 1) {
          uni.navigateTo({
            url: `/pages/operate-cost/apply-form/index?id=${record.id}`,
          })
        } else {
          uni.navigateTo({
            url: `/pages/operate-cost/pay-form/index?id=${record.id}`,
          })
        }
      },
    },
    {
      label: '付款',
      permission: 'svmsapp:operate-cost.confirmfee',
      show: (record) => record.ifPay,
      method: (record) => {
        uni.navigateTo({
          url: `/pages/operate-cost/detail/payFee?id=${record.id}`,
        })
      },
    },
    {
      label: '财务打款凭证',
      show: (record) => record.payStatus == 1,
      permission: 'svmsapp:operate-cost.financeremit',
      method: (record) => {
        uni.navigateTo({
          url: `/pages/operate-cost/detail/financeRemit?id=${record.id}&payFileIdList=${JSON.stringify(record.payFileIdList)}&payRemark=${
            record.payRemark || ''
          }`,
        })
      },
    },
    {
      label: '驳回原因',
      show: (record) => record.checkStatus == 6,
      method: (record) => {
        uni.navigateTo({
          url: `/pages/operate-cost/detail/reason?id=${record.id}&ifAgain=${record.ifAgain}`,
        })
      },
    },
    {
      label: '作废',
      permission: 'svmsapp:operate-cost.invalidorder',
      show: (record) => record.ifNullify,
      method: (record) => {
        uni.showModal({
          title: '提示',
          content: '请再次确认是否要作废申请？',
          success: (res) => {
            if (res.confirm) {
              invalidOrderFn(record)
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          },
        })
      },
    },
    {
      label: '撤回',
      permission: 'svmsapp:operate-cost.cancel',
      show: (record) => record.ifRevoke,
      method: (record) => {
        uni.showModal({
          title: '提示',
          content: '请确认是否要撤回申请？',
          success: (res) => {
            if (res.confirm) {
              cancelOrderFn(record)
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          },
        })
      },
    },
    {
      label: '审批',
      permission: 'svmsapp:operate-cost.check',
      show: (record) => record.ifCheck,
      method: (record) => {
        uni.navigateTo({
          url: `/pages/operate-cost/detail/index?id=${record.id}&type=checkType`,
        })
      },
    },
  ])
  // 点击卡片
  const toDetailFn = (record) => {
    if (usePermission('svmsapp:operate-cost.detail')) {
      uni.navigateTo({
        url: `/pages/operate-cost/detail/index?id=${record.id}`,
      })
    }
  }
  // 撤回
  const cancelOrderFn = (record) => {
    revokeCostApi({
      id: record.id,
    }).then(() => {
      uni.$emit('refreshData')
      uni.showToast({
        title: '已撤回',
        icon: 'none',
      })
    })
  }

  // 作废订单
  const invalidOrderFn = (record) => {
    nullifyCostApi({
      id: record.id,
    }).then(() => {
      uni.$emit('refreshData')
      uni.showToast({
        title: '已作废',
        icon: 'none',
      })
    })
  }
  // 跳转工单详情
  const toWork = (record) => {
    if (usePermission('svmsapp:work-order')) {
      uni.navigateTo({
        url: `/pages/work/workOrder/detail/index?workOrderId=${record.workId}&orderId=${record.businessId}&workCode=${record.workCode}&orderType=${record.businessType}`,
      })
    }
  }
  // 跳转业务单详情
  const toOrder = (record) => {
    if (record.businessType === 1) {
      if (usePermission('svmsapp:order:short-order.view')) {
        uni.navigateTo({ url: `/pages/order/short-order/detail/index?id=${record.businessId}` })
      }
    } else {
      if (usePermission('svmsapp:order:long-order.view')) {
        uni.navigateTo({ url: `/pages/order/long-order/detail/index?id=${record.businessId}` })
      }
    }
  }

  const getCardType = (record) => {
    let result = 'gray'
    switch (record.checkStatus) {
      case 2:
        result = 'yellow'
        break
      case 3:
        result = 'blue'
        break
    }
    return result
  }

  const getStatusType = (record) => {
    let result = {
      color: '#8491A8',
      background: '#F2F3F5',
    }
    switch (record.status) {
      case 1:
        result = {
          color: '#722ED1',
          background: '#F5E8FF',
        }
        break
      case 2:
        result = {
          color: '#FF7D00',
          background: '#FFF7E8',
        }
        break
      case 3:
        result = {
          color: '#3072F6',
          background: '#E8F3FF',
        }
        break
      case 4:
        result = {
          color: '#00B42A',
          background: '#E8FFEA',
        }
        break
      case 5:
        result = {
          color: '#8491A8',
          background: '#F2F3F5',
        }
        break
      case 6:
        result = {
          color: '#F53F3F',
          background: '#FFECE8',
        }
        break
      case 7:
        result = {
          color: '#8491A8',
          background: '#F2F3F5',
        }
        break
    }
    return result
  }
</script>

<style lang="less" scoped>
  .overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
  }
  .order-tag-list {
    padding: 24rpx 0 0;
    .order-tag-item {
      height: 32rpx;
      line-height: 32rpx;
      box-sizing: content-box;
      display: inline-block;
      font-size: 24rpx;
      padding: 0rpx 12rpx;
      border-radius: 18rpx;
      border: 2rpx solid #3072f6;
      background: #e0edff;
      color: #3072f6;
      margin-right: 20rpx;
    }
  }
  .link {
    color: #3072f6;
  }

  .record-item {
    margin-bottom: 32rpx;
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 0 0 2rpx;
    font-size: 26rpx;

    .record-header {
      display: flex;
      padding: 34rpx 32rpx 24rpx;
      border-radius: 16rpx 16rpx 0 0;
      font-size: 28rpx;
      height: 86rpx;
      background-color: #fff;

      .car-channel-name {
        flex: 1;
        margin-right: 30rpx;
        font-weight: 500;
        color: #191c27;
        word-break: break-all;
        width: calc(100% - 100rpx);
        color: #55585f;

        .split-line {
          position: relative;
          top: -1rpx;
          margin: 0 4rpx;
        }
      }

      .car-status {
        font-weight: 600;
      }
    }

    .record-header.wait .car-status {
      color: #e59b1c;
    }

    .record-header.runing .car-status {
      color: #3072f6;
    }

    .record-header.done .car-status {
      color: #8491a8;
    }

    .record-content {
      padding: 17rpx 32rpx 24rpx;
      background-color: #fff;

      .order-car-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #191c27;
        margin-bottom: 16rpx;
        line-height: 44rpx;

        .car-modelname {
          font-size: 32rpx;
          font-weight: 600;
          flex: 1;
        }

        .car-license {
          font-size: 28rpx;
          width: 150rpx;
          text-align: right;
          margin-left: 40rpx;
        }
      }

      .user-phones {
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        .order-user {
          width: 50%;
          font-size: 28rpx;
          color: #8491a8;
          display: flex;
          margin-top: 24rpx;

          .user-value {
            font-size: 28rpx;
            font-weight: 600;
            color: #191c27;
            display: flex;
            align-items: center;

            .user-name {
              display: inline-block;
              margin-right: 16rpx;
              max-width: 120rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .phone {
              position: relative;
              top: 1rpx;
            }
          }
        }
        .order-user-100 {
          width: 100%;
          .user-name-100 {
            margin-right: 16rpx;
            max-width: 400rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .record-btns {
    padding: 0 32rpx 28rpx 26rpx;
    background-color: #fff;
    .btns-wrap {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .record-btn {
        margin-left: 12rpx;
      }
    }
  }
  .checkFlow {
    display: flex;
    flex-direction: column;
    .content {
      display: flex;
      margin: 4rpx 0;
      .checkStaff {
        max-width: 180rpx;
      }
    }
  }
  .payStatus {
    &_0 {
      color: #ff7d00;
    }
    &_1 {
      color: #00b42a;
    }
  }
  .btn-wrap {
    margin: 24rpx 32rpx 32rpx;
    text-align: right;
  }
  .card-footer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .ve-button + .ve-button {
      margin-left: 24rpx;
    }
  }
</style>
